<template>
	<el-row :class="[store.userInfo.isCollapse ? 'big2' : 'big']">
		<el-col :text="12">
			<el-scrollbar height="92vh">
				<el-menu
					width="auto"
					background-color="#29374b"
					class="el-menu-vertical-demo"
					:default-active="store.userInfo.defaultAct"
					active-text-color="#ffffff"
					:unique-opened="true"
					text-color="#fff"
					:collapse="store.userInfo.isCollapse"
					:collapse-transition="false"
				>
					<block v-for="item in store.userInfo.tree" :key="item.index">
						<el-menu-item
							:index="item.index"
							v-if="!item.children && store.userInfo.permitUrl.includes(item.path)"
							@click="toPage(item)"
							:class="[store.userInfo.defaultAct == item.index ? 'active' : '']"
						>
							<view class="flexst">
								<svg-icon :name="item.icon" class="menu-icon" color="#ffffff"/>
								<text v-show="!store.userInfo.isCollapse">{{ item.name }}</text>
							</view>
						</el-menu-item>
					</block>
					<view class="tit1" v-for="item in store.userInfo.tree" :key="item.index" :class="[store.userInfo.isCollapse ? 'active' : 'tit1']">
						<el-sub-menu
							:index="item.index"
							v-if="item.children && store.userInfo.permitUrl.includes(item.path)"
							:class="[store.userInfo.defaultAct == item.index ? 'active' : '']"
						>
							<template #title>
								<view class="flexst">
									<svg-icon :name="item.icon" class="menu-icon"  color="#ffffff"/>
									<text v-show="!store.userInfo.isCollapse">{{ item.name }}</text>
								</view>
							</template>
							<view class="tit1" v-for="item2 in item.children" :key="item2.index">
								<el-menu-item
									:index="item2.index"
									v-if="!item2.children && store.userInfo.permitUrl.includes(item2.path)"
									@click="toPage(item2)"
									:class="[store.userInfo.defaultAct == item2.index ? 'active' : '']"
								>
									<text>{{ item2.name }}</text>
								</el-menu-item>
							</view>
							<view class="tit1" v-for="item2 in item.children" :key="item2.index" :class="[store.userInfo.defaultAct == item2.index ? 'active' : '']">
								<el-sub-menu :index="item2.index" v-if="item2.children && store.userInfo.permitUrl.includes(item.path)">
									<template #title>
										<view class="flexst">
											<svg-icon :name="item2.icon" class="menu-icon" color="#ffffff"/>
											<text>{{ item2.name }}</text>
										</view>
									</template>
									<view class="tit1" v-for="item3 in item2.children" :key="item3.name">
										<el-menu-item
											:index="item3.index"
											v-if="item2.children && store.userInfo.permitUrl.includes(item3.path)"
											@click="toPage(item3)"
											:class="[store.userInfo.defaultAct == item3.index ? 'active' : '']"
										>
											{{ item3.name }}
										</el-menu-item>
									</view>
								</el-sub-menu>
							</view>
						</el-sub-menu>
					</view>
				</el-menu>
			</el-scrollbar>
		</el-col>
	</el-row>
</template>

<script setup lang="ts">
import useMenuStore from '@/stores/modules/menu';
const store = useMenuStore();
const page = window.location.hash.replace('#', '');
if (page === '/' || page === '/pages/login/login') {
	store.userInfo.defaultAct = '0';
	store.userInfo.pageTitle = '首页';
} else if (page === '/pages/error/error') {
	store.userInfo.defaultAct = '-1';
	store.userInfo.pageTitle = '错误页';
} else if (uni.getStorageSync('userInfo').flattenTree) {
	let current = uni.getStorageSync('userInfo').flattenTree.find(item => {
		return item.path == window.location.hash.replace('#', '');
	});
	store.userInfo.defaultAct = current.index;
	store.userInfo.pageTitle = current.title;
}

const toPage = item => {
	const pages = getCurrentPages();
	const currentPage = pages[pages.length - 1];
	const currentPath = currentPage.$page.path;
	console.log('currentPath', currentPath);
	const page = window.location.hash.replace('#', '');
	if (item.path === currentPath) {
		return;
	}
	store.userInfo.defaultAct = item.index;
	store.userInfo.pageTitle = item.title;
	uni.redirectTo({
		url: item.path
	});
};
</script>

<style lang="scss">
.el-menu {
	border-right: none !important;
}
.big {
	width: 240px;
	height: calc(100vh - (var(--top-window-height)));
	background: #29374b;
	box-sizing: border-box;
}
.big2 {
	width: 64px;
	height: calc(100vh - (var(--top-window-height)));
	background: #29374b;
	box-sizing: border-box;
	transform: scaleX(240px, 64px);
}

.uni-icons {
	margin-right: 10px;
}
.logobox {
	padding: 20px;
	font-size: 20px;
	.logo {
		width: 30px;
		height: 30px;
		margin-right: 10px;
	}
}
.pl20 {
	padding-left: 15px;
}

.menu-icon {
	width: 22px;
	height: 22px;
	margin-right: 10px;
}
::v-deep .el-tooltip__trigger {
	.el-sub-menu__icon-arrow {
		svg {
			width: 0;
		}
	}
}
::v-deep .active .is-active .el-tooltip__trigger {
	background: #409eff !important;
	.svg-icon {
		use {
			fill: #ffffff;
		}
	}
}
.active {
	background-color: #409eff;
}
</style>
